<template>
  <div class="meddic-indicator">
    <div class="meddic-items">
      <div 
        v-for="(item, index) in meddicItems" 
        :key="index"
        class="meddic-item"
        :class="getItemClass(item)"
      >
        {{ item.label }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  data: {
    type: Object,
    default: () => ({
      m: 'active', // M - Metrics (指标)
      e: 'active', // E - Economic Buyer (经济决策者)
      d1: 'active', // D - Decision Criteria (决策标准)
      d2: 'active', // D - Decision Process (决策流程)
      i: 'inactive', // I - Identify Pain (识别痛点)
      c: 'active' // C - Champion (支持者)
    })
  }
})

const meddicItems = computed(() => [
  { label: 'M', status: props.data.m },
  { label: 'E', status: props.data.e },
  { label: 'D', status: props.data.d1 },
  { label: 'D', status: props.data.d2 },
  { label: 'I', status: props.data.i },
  { label: 'C', status: props.data.c }
])

const getItemClass = (item) => {
  return {
    'meddic-item--active': item.status === 'active',
    'meddic-item--inactive': item.status === 'inactive'
  }
}
</script>

<style scoped>
.meddic-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
}

.meddic-items {
  display: flex;
  gap: 4px;
  align-items: center;
}

.meddic-item {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  color: white;
  transition: all 0.3s ease;
}

.meddic-item--active {
  background-color: #409eff;
}

.meddic-item--inactive {
  background-color: #c0c4cc;
}
</style>